<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS点击按钮-无文字输入框抖动效果</title>
    <style>
        /* 第二步：开始写CSS */
        .login-box {
            width: 300px;
            min-width: 300px;
            height: 300px;
            min-height: 300px;
            background-color: white;
            border: 1px solid black;
        }
        .title {
            text-align: center;
            color: cornflowerblue;
        }
        .form-item-wrap {
            width: 100%;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .form-label {
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 20px;
        }
        .form-input{
            width: 80%;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 20px;
            padding: 5px;
        }
        .form-submit {
            display: block;
            float: right;
            margin-right: 20px;
            color: cornflowerblue;
            background-color: white;
            text-shadow: 1px 1px 2px cornflowerblue;
            border: none;
            outline: none;
            font-size: 20px;
            font-weight: 500;
        }
        .form-submit:hover {
            cursor: pointer;
            font-size: 22px;
        }
        /* 写一个class控制抖动的特效 */
        .shake {
            border-color: red;
            animation: shake 800ms ease-in-out;
        }
        /* 抖动特效的过程 */
        @keyframes shake {
            /* 动画需：“对称”实现 */
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(+2px, 0, 0); }
            30%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(+4px, 0, 0); }
            50% { transform: translate3d(-4px, 0, 0); }
        }
    </style>
</head>
<body>
<!-- 第一步：写好表单布局 -->
<div class="login-box" style="margin:100px auto;">
    <h3 class="title">登录</h3>
    <form name="login_form" id="login_form">
        <div class="form-item-wrap">
            <label for="username" class="form-label">用户名</label><br/>
            <input type="text" name="username" id="username" 
            placeholder="输入用户名" required class="form-input">
        </div>
        <div class="form-item-wrap">
            <label for="password" class="form-label">密码</label><br/>
            <input type="password" name="password" id="password" 
            placeholder="输入密码" required class="form-input">
        </div>
        <input type="submit" value="登录" class="form-submit">
    </form>
</div>
<script>
    // 第三步：开始写js
    function shake(elemId) {
        let elem = document.getElementById(elemId);
        if (elem){
            elem.classList.add('shake');
            setTimeout(()=>{ elem.classList.remove('shake') }, 800)
        }
    }
    var submit=document.querySelector('.form-submit');
    window.addEventListener('DOMContentLoaded',function () {
        submit.onclick=function () {
            // 表单提交，如果用户名是空值就调用shake函数去给输入框加上class
            // 这样子就可以增加抖动的效果了
            // document.querySelector JS选择器，语法类似JQuery。
            var u=document.querySelector('#username');
            var su=document.querySelector('#password');
            if(u.validity.valueMissing===true){
                shake('username');
                return false;
            }
            if(su.validity.valueMissing===true){
                shake('password');
                return false;
            }
            return true;
        }
    })
</script>
</body>
</html>